<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="jd-wrap">
        <header class="jd-header">
            <div class="jd-header__classify">分类</div>
            <div class="jd-header__input">
                <i class="fa fa-search jd-header__fontItem"></i>
                <input type="text" placeholder="手机">
                <i class="fa fa-qrcode jd-header__fontItem"></i>
            </div>
            <div class="jd-header__more"><i class="fa fa-plus"></i></div>
        </header>

        <div class="jd-tab">
            <span class="jd-tab__recommend active">推荐</span>
            <span class="jd-tab__follow">关注</span>
        </div>

        <div class="jd-banner">
            <div class="jd-banner__imgWrap">

            </div>

            <ul class="jd-banner__point">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

        <section class="jd-nav">
            <ul class="jd-nav__content">
                <li>
                    <i class="fa fa-envira"></i>
                    <p>新人红包</p>
                </li>
                <li>
                    <i class="fa fa-envira"></i>
                    <p>新人红包</p>
                </li>
                <li>
                    <i class="fa fa-envira"></i>
                    <p>新人红包</p>
                </li>
                <li>
                    <i class="fa fa-envira"></i>
                    <p>新人红包</p>
                </li>
                <li>
                    <i class="fa fa-envira"></i>
                    <p>新人红包</p>
                </li>
                <li>
                    <i class="fa fa-envira"></i>
                    <p>新人红包</p>
                </li>
                <li>
                    <i class="fa fa-envira"></i>
                    <p>新人红包</p>
                </li>
                <li>
                    <i class="fa fa-envira"></i>
                    <p>新人红包</p>
                </li>
                <li>
                    <i class="fa fa-envira"></i>
                    <p>新人红包</p>
                </li>
                <li>
                    <i class="fa fa-envira"></i>
                    <p>新人红包</p>
                </li>
            </ul>
        </section>

        <!--活动模块-->
        <section class="jd-activity">
            <hr>
            <div class="jd-activity__item">
                <div class="jd-activity__itemInfo">
                    <div class="jd-activity__poster"></div>
                    <div class="jd-activity__introduce">
                        <h4 class="jd-activity__title">
                            今日好劵|1.7上新：苏宁年货节 领2元支付劵和5元支付卷（可叠加易购卷）
                            <i class="fa fa-times"></i>
                        </h4>
                        <p class="jd-activity__ranking">
                            <span>精选</span>
                            <span>排行榜商品</span>
                        </p>
                        <p class="jd-activity__subTitle">京东支付X浦发银行 话费充值满49-...</p>
                        <p class="jd-activity__comment">
                            <span>京东 | 01-07</span>
                            <span class="f_right">值 89%</span>
                            <span class="f_right"><i class="fa fa-comments-o"></i> 39</span>
                        </p>
                    </div>
                </div>
            </div>

            <hr>
            <div class="jd-activity__item">
                <div class="jd-activity__itemInfo">
                    <div class="jd-activity__poster"></div>
                    <div class="jd-activity__introduce">
                        <h4 class="jd-activity__title">
                            今日好劵|1.7上新：苏宁年货节 领2元支付劵和5元支付卷（可叠加易购卷）
                            <i class="fa fa-times"></i>
                        </h4>
                        <p class="jd-activity__ranking">
                            <span>精选</span>
                            <span>排行榜商品</span>
                        </p>
                        <p class="jd-activity__subTitle">京东支付X浦发银行 话费充值满49-...</p>
                        <p class="jd-activity__comment">
                            <span>京东 | 01-07</span>
                            <span class="f_right">值 89%</span>
                            <span class="f_right"><i class="fa fa-comments-o"></i> 39</span>
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <!--底部导航-->
        <footer class="jd-footer">
            <ul class="jd-navBar">
                <li class="active">
                    <i class="fa fa-home"></i>
                    <p>首页</p>
                </li>
                <li>
                    <i class="fa fa-wheelchair-alt"></i>
                    <p>好价</p>
                </li>
                <li>
                    <i class="fa fa-wheelchair-alt"></i>
                    <p>好物社区</p>
                </li>
                <li>
                    <i class="fa fa-wheelchair-alt"></i>
                    <p>我的</p>
                </li>
            </ul>
        </footer>
    </div>
</body>
</html>